<template>
    <div class="big-box">
        <div class="pageheader">
            <img src="http://imgfile.xxkdjy.top/55725.png">
            <h1>说说</h1>
        </div>
        <div class="xx">
            <div class="content">
            <div class="shuoshuo-item" v-for="item in shuoshuolist">
                <div>
                    <div class="item-content">
                        <div class="touxiang">
                            <img :src="item.avater">
                        </div>
                        <div class="rightditil">
                            <div class="user-nameAndmore">
                                <h1>{{ item.shuoshuo_author }} <i class="iconfont icon-icon-"
                                        v-if="item.shuoshuo_istop"></i>
                                </h1>
                                <div class="shuoshuocontent">
                                    {{ item.shuoshuo_content }}
                                </div>
                            </div>
                            <div class="right-imglist">
                                <img :src="img.shuoshuo_url" v-for="img in item.shuoshuoimgs_name">
                            </div>
                            <div class="time">
                                {{ item.time }}
                                <i class="iconfont icon-icon" @click="addstrss(item)" :class="{ 'active': item.islike }">
                                    <span v-if="item.islike">{{ parseInt(item.shuoshuo_strs) + 1 }}</span>
                                    <span v-else>{{ item.shuoshuo_strs }}</span>
                                </i>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <comment :isshowhead="isshowhead" :istoshowcomment="item.showcomment"
                            @changeshowcomment="changeshowcomment(item.id)" fontsize="s"
                            :typeobj="{ type: 2, id: item.id }">
                            <template #defult>
                                <div class="commentbox">
                                    <div class="login-container">
                                        <input type="text" placeholder="昵称(必填)" v-model="form.username">
                                        <input type="text" placeholder="头像地址(选填)" v-model="form.usercover">
                                        <input type="text" placeholder="网址地址(选填)" v-model="form.usersiteurl">
                                    </div>
                                    <div class="input-item">
                                        <el-input v-model="form.input" ref="inputbox" placeholder="说点什么吧...." size="large"
                                            type="textarea" maxlength="50" show-word-limit resize="none" />
                                        <div class="option">
                                            <i class="iconfont icon-icon_xinqing" @click="addemoje">表情</i>
                                            <el-button type="primary" size='small' @click="subcomment(item)">提交</el-button>
                                        </div>
                                    </div>
                                    <emoji size="m" :isshow="isshowemoji" :content="emojis" @changeemoji="changeemoji">
                                    </emoji>
                                </div>

                            </template>
                        </comment>
                    </div>
                </div>
            </div>
            <div class="observer">
                {{ isend ? "暂无更多" : "下拉加载更多" }}
            </div>
        </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, watch, inject } from 'vue';
import emoji from "@/components/emoji.vue";
import comment from "@/components/comment.vue"
import { getshuoshuo, gettopshuoshuo } from "@/api/shuoshuo.js"
import { addcomment } from "@/api/article.js"
import { addstrs } from '@/api/shuoshuo.js';
import { debounce } from '@/utils/index.js';
let debouncefunc = debounce()
let shuoshuolist = ref([])
let reload = inject("reload")
let isshowhead = ref(true);
let isshowemoji = ref(false);
let page = ref(1);
let box
let pageSize = ref(4)
let inputbox = ref()
let emojis = ref([]);
let isend = ref(false);
let observers;/* 表示是否结束 */
function changeshowcomment(id) {
    shuoshuolist.value.map(item => {
        if (item.id == id) {
            item.showcomment = !item.showcomment
        }
    })
}
/* 展示表情 */
function addemoje() {
    isshowemoji.value = !isshowemoji.value;
}
/* 添加表情 */
function changeemoji(item) {
    form.value.input += item.pop();

}
/*  */
let form = ref({
    input: "",
    username: "",
    usercover: "",
    usersiteurl: ""
})
/* 提交评论 */
async function subcomment(item) {
    
    if(localStorage.getItem("isLogin")){
        let user = JSON.parse(localStorage.getItem("userinfo"))
        form.value.username = user.username
        form.value.usercover = user.Users_corver
    }

    if (form.value.input.trim() == "" || form.value.username.trim() == "") {
        ElMessage({
            message: '请输入内容',
            type: 'warning',
        })
        return
    } else {
        let res = await addcomment({
            type: 2,
            forid: item.id.toString(),
            content: form.value.input,
            username: form.value.username,
            usersiteurl: form.value.usersiteurl,
            usercover: form.value.usercover
        })
        if (res.data.status == 200) {
            ElNotification.success({
                title: 'Success',
                message: '评论成功',
                offset: 50,
            })
            resetform()
        } else {
            ElNotification.warning({
                title: 'warning',
                message: '评论失败',
                offset: 50,
            })
            resetform()
        }
        reload()
    }
}
/* 重置 */
function resetform() {
    form.value.input = "";
    form.value.username = "";
    form.value.usercover = "";
    form.value.usersiteurl = "";
}
/* 监视 */
function observe1(observer, status) {
    box = document.querySelector(`.${observer}`)
    observers = new IntersectionObserver(async (entries) => {
        if (entries[0].intersectionRatio > 0) {
            setTimeout(async () => {
                page.value += 1
                await load(page.value, pageSize.value, status)
                if (isend.value) {
                    observers.unobserve(box)
                }
            }, 400)
        }
    })
    observers.observe(box)
}
/* 加载数据 */
const load = async (page, pageSize, shuoshuo_status) => {
    let res = await getshuoshuo({ page, pageSize, shuoshuo_status })
    if (res.data.status == 200) {
        let newdata = res.data.data.map(item => {
            let fleg = true;
            let { createdAt, ...temp } = item
            let date = Math.floor((new Date() - new Date(createdAt)) / (86400 * 1000));
            if (date < 1) {
                fleg = false;
                date = Math.floor((new Date() - new Date(createdAt)) / (3600 * 1000));
            }
            return {
                ...temp,
                showcomment: false,
                islike: false,
                time: fleg ? date + "天前" : date + "小时前",
            }
        })
        let val1 = newdata.filter(item => item.shuoshuo_istop)
        let val2 = newdata.filter(item => !item.shuoshuo_istop)
        shuoshuolist.value = shuoshuolist.value.concat(val1.concat(val2));
    } else {
        isend.value = true
        ElNotification.warning({
            title: 'warning',
            message: res.data.message,
            offset: 50,
        })
    }
}
/* 获取第一个置顶的 */
async function gettop() {
    let item = await gettopshuoshuo()
    if (item.data.status == 200) {
        let fleg = true;
        let { createdAt, ...temp } = item.data.data
        let date = Math.floor((new Date() - new Date(createdAt)) / (86400 * 1000));
        if (date < 1) {
            fleg = false;
            date = Math.floor((new Date() - new Date(createdAt)) / (3600 * 1000));
        }
        shuoshuolist.value.push({
            ...temp,
            showcomment: false,
            islike: false,
            time: fleg ? date + "天前" : date + "小时前",
        })
        return true
    } else {
        return false
    }
}
async function addstrss(item) {
    debouncefunc(800, async () => {
        if (!item.islike) {
            let res = await addstrs({ shuoshuo_id: item.id, status: 1 })
            if (res.data.status == 200) {
                item.islike = true;
            }
        } else {
            let res = await addstrs({ shuoshuo_id: item.id, status: 2 })
            if (res.data.status == 200) {
                item.islike = false;
            }
        }
    })
}
onMounted(async () => {

    let status = await gettop()
    if (status) {
        await load(1, 3, 1)
    } else {
        await load(1, 4, 1)
    }
    observe1("observer", 1)
})
</script>

<style lang="scss" scoped>
.xx{
    @include bk-style;
}
.active {
    color: aquamarine;
}

.observer {
    text-align: center;
    font-size: $font-size-s;

}

:deep(.el-textarea__inner) {
    background-color: transparent;
}

:deep(.el-input__count) {
    background-color: transparent;
}

:deep(.el-textarea__inner:hover) {
    box-shadow: 0px 0 0 0;
}

:deep(.el-textarea__inner:focus) {
    box-shadow: 0px 0 0 0;
}

.commentbox {
    margin: 10px 0;
    width: 100%;
    border: 1px solid #eceff2;
    border-radius: 10px;

    .login-container {

        height: 35%;
        width: 100%;
        padding: 3px;
        padding-bottom: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        border-radius: 10px;

        input {
            background-color: transparent;

            @include userTheme {
                font-family: getThemeValue("fontfamily");
                color: getThemeValue("fontColor");
            }

            height: 80%;
            width: 30%;
            border: 0px;
            outline: none;
            /* 移除默认边框 */

            font-size: $font-size-m;
        }
    }
}

.input-item {
    .option {
        cursor: pointer;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
}

.big-box {
    padding-top: 40px;
    width: 100%;
    padding-bottom: 20px;
    
    .content {
        width: 70%;
        margin: 0 auto;
        margin-top: 25px;

        @include userTheme {
            background-color: getThemeValue("shuoshuoitemcolor");
            color: getThemeValue("fontColor");
        }

        padding: 20px;

        .shuoshuo-item {
            margin-bottom: 20px;
            width: 100%;

            .item-content {
                width: 320px;
                height: 100%;
                display: flex;

                .touxiang {
                    img {
                        width: 50px;
                        height: 50px;
                    }
                }

                .rightditil {
                    @include userTheme {
                        font-family: getThemeValue("fontfamily");
                        color: getThemeValue("fontColor");
                    }

                    width: 90%;

                    .user-nameAndmore {
                        padding-left: 15px;

                        h1 {
                            font-size: $font-size-m;
                        }

                        .shuoshuocontent {
                            margin-top: 15px;

                        }
                    }

                    .time {
                        display: flex;
                        justify-content: space-between;
                        padding: 0 8px;
                        font-size: $font-size-s;
                        color: rgb(128, 128, 128);
                        cursor: pointer;

                        i {
                            span {
                                color: #000;
                            }
                        }
                    }

                    .right-imglist {
                        margin-top: 10px;
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: start;

                        img {
                            height: 80px;
                            width: 80px;
                            margin-left: 8px;
                            margin-bottom: 8px;
                        }
                    }

                }
            }

            .comment {
                width: 320px;
            }
        }
    }

    .pageheader {
        height: 250px;
        width: 100%;
        position: relative;

        img {
            object-fit: cover;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            filter: blur(2px);
            opacity: 0.9;
        }

        h1 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            @include userTheme {
                color: getThemeValue("fontcolor");
                font-family: getThemeValue("fontfamily");
            }

            letter-spacing: 3px;
            text-align: center;
            font-size: $font-size-xl;


        }
    }
}

@media screen and (max-width: 650px) {
    .content {
        width: 100% !important;

    }
}
</style>